<template>
	<view class="app">
		<view class="search-div"><u-search @custom="searchlist" @search="searchlist" placeholder="请输入商品名称" v-model="params.keyword"></u-search></view>
		<view class="tabs-div">
			<view class="u-flex-1"><u-tabs :current="current" :list="list" @click="clickTabs"></u-tabs></view>
			<view class=""><u-button type="primary" size="small" shape="circle" @click="add" v-has="{id:3}">添加商品</u-button></view>
		</view>
		<u-gap height="200rpx"></u-gap>
		<view class="">
			<u-list @scrolltolower="scrolltolower" :scrollIntoView="o_id">
				<u-list-item v-for="(item, index) in List" :key="index" :id="'o_' + index">
					<view class="u-flex content-box u-flex-items-center">
						<u-image radius="20rpx" width="200rpx" height="200rpx" :src="item.master"></u-image>
						<view class="u-flex-column goods-info u-m-l-20 u-flex-1 ">
							<text class="u-line-2">{{ item.name }}</text>
							<view class="">
								<text>库存:{{ item.total - item.sell }}</text>
								<text class="u-m-l-20">销量:{{ item.sell }}</text>
							</view>
							<text>￥{{ item.sell_price }}</text>
						</view>
						<view class="u-m-l-20" @click="showedit(index)" v-has="{id:3}"><u-icon size="20" name="edit-pen-fill"></u-icon></view>
						<u-transition :show="item.show" mode="fade">
							<view class="fixd-div">
								<u-grid :customStyle="'width:100%;flex-wrap: nowrap;'" :border="false" col="5">
									<u-grid-item @click.native.stop="handle(i, index)" v-for="(data, i) in btnList" :index="i" :key="i">
										<text class="iconfont  el-sc-bianji"></text>
										<text class="grid-text">{{ data.title }}</text>
									</u-grid-item>
								</u-grid>
								<view class="close-icon" @click="item.show = false" ><u-icon size="20" color="#FFFFFF" name="close-circle"></u-icon></view>
							</view>
						</u-transition>
					</view>
				</u-list-item>
				<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
			</u-list>
		</view>
		<u-popup :show="show" @close="closepup" @open="openpup" mode="bottom">
			<view class="u-p-20" v-if="detail.has_sku">
				<view class="u-flex u-flex-items-center batch-div">
					<text class="u-m-r-20">售价:</text>
					<u-input v-model="batch.sell_price" fontSize="24rpx"></u-input>
					<text class="u-m-r-20 u-m-l-20">库存:</text>
					<u-input v-model="batch.total" fontSize="24rpx"></u-input>
					<view class="u-flex-1 u-m-l-20"><u-button @click="savebatch" size="small" type="primary" shape="circle">批量设置</u-button></view>
				</view>
				<scroll-view scroll-y="true" class="skulist">
					<u-form labelWidth="140rpx">
						<block v-for="(item, i) in skulist">
							<u-form-item label="规格名称"><u-text :text="item.pvs_value"></u-text></u-form-item>
							<u-form-item label="售价"><u-input fontSize="24rpx" v-model="item.sell_price"></u-input></u-form-item>
							<u-form-item label="库存"><u-input fontSize="24rpx" v-model="item.total"></u-input></u-form-item>
							<u-line></u-line>
						</block>
					</u-form>
				</scroll-view>
				<u-button type="primary" shape="circle" @click="saveinventory">提交</u-button>
				<filler></filler>
			</view>
			<view class="u-p-20" v-else>
				<u-form>
					<u-form-item label="售价"><u-input fontSize="24rpx" v-model="detail.sell_price"></u-input></u-form-item>
					<u-form-item label="库存"><u-input fontSize="24rpx" v-model="detail.total"></u-input></u-form-item>
				</u-form>
				<u-button type="primary" shape="circle" @click="saveinventory">提交</u-button>
			</view>
		</u-popup>
		<u-modal :show="show_model" @cancel="show_model = false" :showCancelButton="true" @confirm="changestatus" ref="uModal" :asyncClose="true" :content="content"></u-modal>
		<lc-fab-touch ref="fab" :content="contents" horizontal="right" vertical="bottom" direction="horizontal" @trigger="trigger" />
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import {objextend} from '@/util/index.js';
export default {
	data() {
		return {
			List: [],
			page: 1,
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '实在没有了',
			params: {
				status: 1,
				keyword: ''
			},
			list: [
				{
					name: '出售中'
				},
				{
					name: '仓库中'
				},
				{
					name: '已售罄'
				}
			],
			btnList: [
				{
					title: '编辑'
				},
				{
					title: '库存'
				},
				{
					title: '下架'
				},
				{
					title: '复制'
				},
				{
					title: '删除'
				}
			],
			detail: {},
			show: false,
			batch: {
				sell_price: '',
				total: ''
			},
			skulist: [],
			show_model: false,
			content: '是否下架该商品？',
			btn_id: -1,
			o_id: '',
			contents: [
				{
					iconPath: 'arrow-up',
					selectedIconPath: 'arrow-up',
					text: '顶部',

					active: false
				},
				{
					iconPath: 'home',
					selectedIconPath: 'home-fill',
					text: '首页',
					active: false
				}
			],
			current: 0
		};
	},
	onLoad(e) {
		if (e.tab) {
			this.current = Number(e.tab);
			this.changeslist(this.current);
		} else {
			this.searchlist();
		}
	},
	computed: {
		...mapState({
			$BasicsUrl: state => state.$BasicsUrl,
		})
	},
	onPullDownRefresh() {
		this.searchlist();
	},
	methods: {
		trigger(e) {
			if (e.index == 0) {
				this.o_id = '';
				this.$nextTick(() => {
					this.o_id = 'o_0';
				});
			} else if (e.index == 1) {
				uni.$u.route({
					url: 'pages/index/index'
				});
			}
		},
		changestatus() {
			let item = this.List[this.index];
			if (this.btn_id == 2) {
				let data = {
					ids: [item.id],
					status: item.status == 1 ? 0 : 1,
					update_time: item.update_time
				};

				uni.$u.http
					.put('/shop/spu', data,{custom:{id:3}})
					.then(res => {
						this.show_model = false;
						this.changelist(item.id);
					})
					.catch(err => {});
			} else {
				let data = {
					ids: [item.id]
				};
				uni.$u.http.delete('shop/spu', data,{custom:{id:3}}).then(res => {
					uni.$u.toast('删除成功');
					this.show_model = false;
					this.List.splice(this.index, 1);
				});
			}
		},
		savebatch() {
			this.skulist.forEach(a => {
				if (this.batch.sell_price) {
					a.sell_price = this.batch.sell_price;
				}
				if (this.batch.total) {
					a.total = this.batch.total;
				}
			});
		},
		changelist(id) {
			uni.$u.http
				.get('/shop/spu/' + id, {custom:{id:3}})
				.then(res => {
					let detail = res.msg;
					if (detail.master.indexOf('http') == -1) {
						detail.master = this.$BasicsUrl + '/' + detail.master;
					}
					this.List[this.index] = objextend(this.List[this.index], detail);
					this.List[this.index].show = false;
					this.show = false;
				})
				.catch(err => {});
		},
		closepup() {
			this.show = false;
		},
		openpup() {},
		handle(i, index) {
			let id = this.List[index].id;
			this.index = index;
			this.btn_id = i;
			switch (i) {
				case 0:
					this.edit(id);
					break;
				case 1:
					this.getdetial(id);
					break;
				case 2:
					this.show_model = true;
					this.content = this.List[index].status == 1 ? '是否下架该商品？' : '是否上架架该商品？';
					break;
				case 3:
					this.copy(id);
					break;
				case 4:
					this.show_model = true;
					this.content = '是否删除该商品？';
					break;
			}
		},
		getdetial(id) {
			uni.$u.http
				.get('/shop/spu/' + id, {custom:{id:3}})
				.then(res => {
					this.detail = res.msg;
					if (this.detail.has_sku) {
						let skulist = [];
						this.detail.sku.forEach(a => {
							skulist.push({
								id: a.inventory.sku_id,
								sell_price: a.inventory.sell_price,
								total: a.inventory.total,
								pvs_value: a.pvs_value
							});
						});
						this.skulist = skulist;
					}
					this.show = true;
				})
				.catch(err => {});
		},
		showedit(i) {
			this.List.forEach(a => {
				a.show = false;
			});
			this.List[i].show = true;
		},
		clickTabs(data) {
			let index = data.index;
			this.changeslist(index);
		},
		changeslist(index) {
			switch (index) {
				case 0:
					this.params.status = 1;
					this.btnList[2].title = '下架';
					break;
				case 1:
					this.params.status = 0;
					this.btnList[2].title = '上架';
					break;
				case 2:
					this.params.status = 2;
					break;
			}
			this.page = 1;
			this.List = [];
			this.getlist();
		},
		scrolltolower() {
			this.getlist();
		},
		searchlist() {
			this.page = 1;
			this.List = [];
			this.getlist();
		},
		//获取列表
		getlist() {
			this.status = 'loading';
			let url = '/shop/spu/list?page=';
			let data = {};
			if (this.params.status == 2) {
				url = '/shop/spu/sellout?page=';
			} else {
				data.status = this.params.status;
			}
			if (this.params.keyword) {
				data.name = this.params.keyword;
			}

			uni.$u.http
				.post(url + this.page + '&size=10', data,{custom:{id:3}})
				.then(res => {
					uni.stopPullDownRefresh();
					let json = res.msg;
					if (json.data.length > 0) {
						this.page++;
						let list = json.data;
						list.forEach(a => {
							a.show = false;
							if (a.master.indexOf('http') == -1) {
								a.master = this.$BasicsUrl + '/' + a.master;
							}
						});
						this.List = this.List.concat(list);
						this.status = 'loadmore';
					} else {
						this.status = 'nomore';
					}
				})
				.catch(err => {});
		},
		//修改库存
		saveinventory() {
			let data = {
				id: this.detail.id,
				type: this.detail.has_sku,
				inventory_data: this.skulist
			};
			if (this.detail.has_sku) {
				data.inventory_data = this.skulist;
			} else {
				data.sell = this.detail.sell;
				data.data = {
					sell_price: this.detail.sell_price,
					total: this.detail.total
				};
			}
			uni.$u.http
				.put('/shop/spu/inventory/' + this.detail.id, data,{custom:{id:3}})
				.then(res => {
					this.changelist(data.id);
				})
				.catch(err => {});
		},
		add() {
			// uni.$u.route({
			// 	url: 'pages/product/detail'
			// });
			let _this = this;
			uni.navigateTo({
				url: '/pages/product/detail',
				events: {
					savesuccess: function(data) {
						_this.searchlist();
					}
				}
			});
		},
		edit(id) {
			// uni.$u.route({
			// 	url: 'pages/product/detail?id=' + id
			// });
			let _this = this;
			uni.navigateTo({
				url: '/pages/product/detail?id=' + id,
				events: {
					savesuccess: function(data) {
						_this.changelist(id);
					}
				}
			});
		},
		copy(id) {
			uni.navigateTo({
				url: '/pages/product/detail?id=' + id + '&isCopy=' + 1,
				events: {
					savesuccess: function(data) {
						_this.searchlist();
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.content-box {
	width: 710rpx;
	margin: 20rpx auto;
	padding: 20rpx;
	position: relative;
}
.goods-info {
	height: 200rpx;
	font-size: 28rpx;
	justify-content: space-between;
}
.skulist {
	height: 70vh;
	margin-bottom: 20rpx;
}
.batch-div {
	font-size: 30rpx;
	padding-bottom: 20rpx;
}
</style>
